<template>
	<view class="node-ul-parent">
		<view class="node-li" v-for="(item,index) in arrayList" :key="index">
			<view class="node-border"></view>
			<view class="node-Name" @click="changeState(item)" :style="{paddingLeft: 24 * item.level + 'rpx'}">
				<u-icon class="warp-layer-li-l-icon" v-show="item.showCity" name="chengshi" custom-prefix="custom-icon" size="30" color="#e1e1e1"></u-icon>
				{{item.name}}
				<u-icon class="node-Name-down" v-show="item.showCity" name="arrow-down" size="30" color="#fff"></u-icon>
				<u-switch class="node-Name-switch" v-model="item.switch" active-color="#4683db" inactive-color="#b1b1b1" size="30" v-show="!item.showCity" @change="handleSwitchChange($event, item)"></u-switch>
			</view>
			<view class="node-ul">
				<tree-node :dataList="item.childList" v-if="item.childList.length > 0 && item.isShow" @handleSwitchChangePrant="handleSwitchChange" @handleRefreshScroll="handleRefreshScroll"></tree-node>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name: 'treeNode',
		componentName: 'treeNode',
		props:{
			dataList:{
				type:Array,
				default:[]
			}
		},
		mounted() {
			this.arrayList = this.dataList
			this.$emit('handleRefreshScroll')
		},
		data(){
			return{
				arrayList:[]
			}
		},
		methods:{
			changeState(e){
				let isShow = !e.isShow 
				this.$set(e,'isShow',isShow)
			},
			handleSwitchChange(e, item) {
				this.$emit('handleSwitchChangePrant', e, item)
			},
			handleRefreshScroll() {
				this.$emit('handleRefreshScroll')
			}
		}
	}
</script>

<style lang="scss">
	.node-ul{
		margin: 0;
	}

	.node-ul .node-li ,.node-ul-parent .node-li {
		// list-style: none;
		// position: relative;
	}
	.node-ul .node-li:before {
		position: absolute;
		content: '';
		top: 30rpx;
		left: -20rpx;
		width: 20rpx;
		height: 1rpx;
		border-bottom: 1rpx solid #000;
	}

	.node-ul .node-li:not(:last-child)::after{
		position: absolute;
		content: '';
		top: -18rpx;
		left: -20rpx;
		bottom: -50rpx;
		border-left: 1rpx solid #000;
	}
	.node-ul .node-li:first-child .node-border{
		position: relative;
	}
	.node-ul .node-li:first-child .node-border::after {
		position: absolute;
		content: '';
		height: 50rpx;
		top: -18rpx;
		left: -20rpx;
		bottom: 0rpx;
		border-left: 1rpx solid #000;
	}
	
	.node-Name{
		position: relative;
		width: 100%;
		height:90rpx;
		line-height: 80rpx;
		padding:0 24rpx;
		border-bottom:2rpx solid #5d5a5a;
		color:#e1e1e1;
		font-size:26rpx;
		.icon{
			padding: 0 10rpx 0 0;
		}
		.node-Name-down,
		.node-Name-switch{
			position: absolute;
			top:50%;
			transform: translateY(-50%);
			right:20rpx;
		}
	}
	.warp-layer-li-l-icon{
		margin-right:10rpx;
	}
</style>
